<template>
  <div style="height: 100%">
    <el-input v-model="filterText" placeholder="输入关键字进行过滤" @input="changeBlur">
    </el-input>
    <div style="height: calc(100% - 40px)">
      <el-empty v-if="currentDept.length <= 0" description="暂无科室数据"></el-empty>
      <template v-else>
        <el-tree ref="tree" :data="currentDept" :expand-on-click-node="false" :filter-node-method="filterNode"
                 :highlight-current=true :indent="20" :props="defaultProps" :show-checkbox="showCheckbox"
                 class="filter-tree" default-expand-all node-key="id" @node-click="nodeClick">
        </el-tree>
      </template>
    </div>
  </div>
</template>

<script lang="ts" setup>
// import { ElTree } from 'element-plus'
import {useUserStoreHook} from "@/store/modules/user"
import {cloneDeep} from 'lodash';

const useUserStore = useUserStoreHook()
type defaultProps = {
  children: string,
  label: string
}
let filterText = ref("")
let currentDept = ref<any>([])
const allDept = ref<any>([])
let defaultProps = reactive<defaultProps>({
  children: 'children',
  label: 'deptName'
})
// let deptExpand = ref(true)
// 定义ref组件
const tree = ref()

let props = defineProps({
  showCheckbox: {
    type: Boolean,
    default: false
  },
  deptData: {
    type: [Array],
    default: () => []
  }
})

let emits = defineEmits(["loadingDeptDrawer", "treeClick"])

function changeBlur() {
  if (filterText.value) {
    filterNode(filterText.value)
  } else {
    currentDept.value = cloneDeep(allDept.value)
  }

}

watch(props.deptData, (val) => {
  if (val.length > 0) {
    emits("loadingDeptDrawer")
  }
})

/** 获取用户权限科室 */
const getPersonnelAuthorityDept = () => {
  currentDept.value = cloneDeep(useUserStore.user.deptList);
  allDept.value = cloneDeep(useUserStore.user.deptList);
}
/** 搜索 */
const filterNode = (value) => {
  if (!value) return true
  // 过滤节点数据
  const filteredNodes = filterTreeNodes(cloneDeep(allDept.value), value);
  currentDept.value = filteredNodes
  return filteredNodes.length > 0;
}

/**
 * 递归过滤树节点
 * @param nodes 树节点数组
 * @param value 过滤值
 * @returns 过滤后的节点数组
 */
const filterTreeNodes = (nodes: any[], value: string): any[] => {
  return nodes.filter(node => {
    const match = node.deptName.includes(value);
    const childrenMatch = node.children && node.children.length > 0
      ? filterTreeNodes(node.children, value)
      : [];
    // 若当前节点匹配或子节点有匹配，保留该节点
    if (match || childrenMatch.length > 0) {
      if (childrenMatch.length > 0) {
        node.children = childrenMatch;
      }
      return true;
    }
    return false;
  });
};

/** 树节点点击事件 */
const nodeClick = (a, _b, _c) => {
  emits('treeClick', a)
}
// 树权限（展开/折叠）
const handleCheckedTreeExpand = (value, _type) => {
  let treeList: any[] = allDept.value;
  for (let i = 0; i < treeList.length; i++) {
    // @ts-ignore
    tree.store.nodesMap[treeList[i].id].expanded = value;
  }
}
getPersonnelAuthorityDept()
defineExpose({
  getPersonnelAuthorityDept
})
</script>

<script lang="ts">
export default {
  name: "NavDeptTree"
}
</script>

<style scoped>
.box-card {
  overflow-y: auto
}

:deep(.el-text.is-truncated) {
  font-size: 14px;
  font-weight: bold;
}
</style>
